<template>
  <div class="pro">
    <span
      v-for="(item, index) in pro"
      :key="index"
      :class="{ active: gameName === item.gameName, isactive:  gameName !== item.gameName }"
      @click="setActive(index,item)"
    >{{ item.label }}</span>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ComPro",
  props: {},

  data() {
    return {
      pro: [
        {
          label: this.$t("gj"),
          gameName: "gyjj_gj"
        },
        {
          label: this.$t("yjyx"),
          gameName: "gyjj_yj"
        },
        {
          label: this.$t("jj"),
          gameName: "gyjj_jj"
        },
        {
          label: this.$t("8x3"),
          gameName: "seven"
        },
        {
          label: this.$t("pw"),
          gameName: "dzpw"
        }
      ],
      active: 1
    };
  },
  watch: {},
  computed: {
    ...mapState("handlegame", ["gameName"])
  },
  methods: {
    setActive(index, item) {
      this.active = index;
      //切换项目的时候充值金额
      this.$store.dispatch("handlegame/removeData");
      this.$store.dispatch("handlegame/handleGame", item.gameName);
    }
  }
};
</script>
<style lang="less" scoped>
.pro {
  display: flex;
  width: 100%;
  justify-content: space-between;
  span {
    width: 62px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #767676;
    font-size: 14px;
  }
}
.active {
  overflow: hidden;
  background: #ededed;
  font-weight: 500;
  color: #000000;
}
.isactive {
  overflow: hidden;
  background: #404040;
  font-weight: 500;
  color: #ffffff;
}
</style>
